<template>
  <el-form inline :model="queryForm">
    <el-form-item label="公司：" prop="region">
      <el-select
        v-model="queryForm.region"
        style="width: 200px"
        placeholder="选择公司"
      >
        <el-option
          v-for="item in generalOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="user">
      <user-select v-model="queryForm.user" mode="button" multiple>
        trsjhasjd
      </user-select>
    </el-form-item>
    <el-form-item style="margin-right: 0">
      <el-space>
        <el-button type="primary" @click="() => emits('submit')"
          >查询</el-button
        >
        <el-button @click="() => emits('reset')">重置</el-button>
      </el-space>
    </el-form-item>
  </el-form>
</template>

<script name="UserQueryForm" lang="ts" setup>
  import { ref, computed } from 'vue';

  const queryForm = ref({
    user: [],
    region: undefined
  });

  const emits = defineEmits(['submit', 'reset']);

  const generalOptions = computed(() => {
    return ['groode', 'veli good', 'emazing', 'lidiculous'].map((v) => ({
      label: v,
      value: v
    }));
  });
</script>
